import React from 'react';
import OriginSwitch from '@ray-js/components-ty-switch';
import { Text, Image } from '@ray-js/ray';
import Strings from '@/i18n';

import res from '../../../public/lampImage';

const { switch_off, switch_on, switch_off_notext, switch_on_notext } = res;

const textMap = {
  normal: {
    on: switch_on,
    off: switch_off,
  },
  notext: {
    on: switch_on_notext,
    off: switch_off_notext,
  },
};

export const Switch = (props: {
  value: boolean;
  onValueChange: (value: boolean) => void;
  showText?: boolean;
  disabled?: boolean;
}) => {
  const { value, onValueChange, showText = true, disabled = false } = props;

  const maps = showText ? textMap.normal : textMap.notext;

  return (
    <Image
      src={maps[value ? 'on' : 'off']}
      style={{
        width: 132,
        height: 64,
        objectFit: 'contain',
        opacity: disabled ? 0.6 : 1,
      }}
      onClick={e => {
        if (disabled) {
          return;
        }
        e?.stopPropagation?.();
        onValueChange(!value);
      }}
    />
  );
};

// return (
//   <OriginSwitch
//     checked={value}
//     onChange={() => onValueChange(!value)}
//     preContent={<Text>{Strings.getLang('switch_off')}</Text>}
//     afterContent={<Text>{Strings.getLang('switch_on')}</Text>}
//     width="200rpx"
//     checkedColor="#43A939"
//     unCheckedColor="#f4214b"
//   />
// );
